import LeftToRightView from '@/components/common/motion/left-to-right-view';
import { adminListShopsByPage } from '@/service/query/shop';
import Link from 'next/link';

export const metadata = {
  title: '管理员',
};

export const dynamic = 'force-dynamic';

export default async function Page() {
  const { result: shopsToReview, error: shopsToReviewError } =
    await adminListShopsByPage({
      page: 1,
      pageSize: 10,
      status: ['reviewing'],
    });

  const { result: warnedShops, error: warnedShopsError } =
    await adminListShopsByPage({
      page: 1,
      pageSize: 10,
      status: ['warning'],
    });

  return (
    <LeftToRightView>
      <div className="p-5 rounded-lg bg-background min-h-[90vh] space-y-8">
        <h1 className="text-2xl font-bold text-center">RIN 外卖 管理员后台</h1>
        <hr className="mx-36" />
        <div className="flex gap-10">
          <Link href="/admin/shop">
            <div className="font-bold text-xl px-10 py-5 border rounded-lg flex items-center gap-2 hover:bg-muted group">
              <span className="i-ri-store-line" />
              <span>商铺管理</span>
              <span className="i-ri-arrow-right-s-line group-hover:translate-x-1 transition-all" />
            </div>
          </Link>
          <Link href="/admin/user">
            <div className="font-bold text-xl px-10 py-5 border rounded-lg flex items-center gap-2 hover:bg-muted group">
              <span className="i-ri-user-line" />
              <div>用户管理</div>
              <span className="i-ri-arrow-right-s-line group-hover:translate-x-1 transition-all" />
            </div>
          </Link>
        </div>
        <div className="flex gap-5">
          <div className="space-y-5 p-5 border rounded-lg flex-1 ">
            <div className="font-bold text-xl">待审核商铺</div>
            <div className="space-y-2 text-sm">
              {shopsToReviewError ? (
                <div className="text-center py-10">
                  {shopsToReviewError.message}
                </div>
              ) : shopsToReview.data.length ? (
                shopsToReview.data.map((shop) => (
                  <Link
                    key={shop.id}
                    href={`/admin/shop/${shop.id}`}
                    className="flex items-center justify-between  px-3 py-2 gap-2 hover:bg-muted rounded-lg group transition-colors"
                  >
                    <span>{shop.name}</span>
                    <div className="flex items-center">
                      <span>立即查看</span>
                      <span className="i-ri-arrow-right-s-line group-hover:translate-x-1 transition-all" />
                    </div>
                  </Link>
                ))
              ) : (
                <div className="w-full h-full flex items-center justify-center">
                  暂无待审核商铺
                </div>
              )}
            </div>
          </div>
          <div className="space-y-5 p-5 border rounded-lg flex-1">
            <div className="font-bold text-xl">警告中商铺</div>
            <div className="space-y-2 text-sm">
              {warnedShopsError ? (
                <div className="text-center py-10">
                  {warnedShopsError.message}
                </div>
              ) : warnedShops.data.length ? (
                warnedShops.data.map((shop) => (
                  <Link
                    key={shop.id}
                    href={`/admin/shop/${shop.id}`}
                    className="flex items-center justify-between px-3 py-2 gap-2 hover:bg-muted rounded-lg transition-colors"
                  >
                    <span>{shop.name}</span>
                    <div className="flex items-center">
                      <span>立即查看</span>
                      <span className="i-ri-arrow-right-s-line group-hover:translate-x-1 transition-all" />
                    </div>
                  </Link>
                ))
              ) : (
                <div className="w-full h-full flex items-center justify-center">
                  暂无警告中商铺
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    </LeftToRightView>
  );
}
